<template>
  <div class="page" v-if="goods">
    <div class="head">
      <h1>商品详情</h1>
      <router-link tag="div" class="backhome" to="/home" replace></router-link>
    </div>
    <div class="goods">
      <van-swipe class="goods-swipe" :autoplay="3000">
          <van-swipe-item v-for="thumb in goods.thumb" :key="thumb">
            <img :src="thumb" >
          </van-swipe-item>
      </van-swipe>
       <van-cell-group>
      <van-cell>
        <div class="goods-title">{{ goods.title }}</div>
        <div class="goods-price">{{ formatPrice(goods.price) }}</div>
      </van-cell>
      <van-cell class="goods-express">
        <van-col span="10">运费：{{ goods.express }}</van-col>
        <van-col span="14">剩余：{{ goods.remain }}</van-col>
      </van-cell>
    </van-cell-group>
     <van-cell title="查看商品详情" />
    <div v-for="thumb in goods.thumb" :key="thumb"><img :src="thumb" ></div>
    <van-goods-action>
      <van-goods-action-mini-btn icon="chat" @click="">
        客服
      </van-goods-action-mini-btn>
      <van-goods-action-mini-btn icon="cart" @click="onClickCart" :info="cartInfo" >
        购物车
      </van-goods-action-mini-btn>
      <van-goods-action-big-btn  @click="addCart">
        加入购物车
      </van-goods-action-big-btn>
      
      <van-goods-action-big-btn primary @click="doBuyNow">
        立即购买
      </van-goods-action-big-btn>

    </van-goods-action>
    
        
      
     
    </div>
   

   
    
  </div>
</template>

<script>
	import {
    XButton,
    Box,
    Group,
    Cell,
    Range,
    XInput,
    TransferDomDirective as TransferDom,
    Popup,
    Clocker,
    XDialog,
    Spinner,
    InlineXNumber
  } from 'vux'
  import Swiper from 'swiper';
  import './common/swiper.min.css';
  import {
  Tag,
  Col,
  Icon,

  CellGroup,
  Swipe,
  Toast,
  SwipeItem,
  GoodsAction,
  GoodsActionBigBtn,
  GoodsActionMiniBtn
} from 'vant';
  import empty from './common/empty.vue'
  import lottery from './common/lottery.vue'
  import CountDown from './common/vue2-countdown.vue'
  import InfiniteLoading from 'vue-infinite-loading';
  import Help from './common/help.vue'
  import {
    log
  } from 'util';
  export default {
    directives: {
      TransferDom
    },
    components: {
      XButton,
      Box,
      Group,
      Cell,
      Range,
      XInput,
      empty,
      Popup,
      Clocker,
      XDialog,
      CountDown,
      InlineXNumber,
      Spinner,
      InfiniteLoading,
      Help
    },
    data() {
      return {
        cartInfo:"0",
        goods: {
        id:0,
        title: '',
        price: 0,
        express: '',
        remain: 0,
        thumb: []
      },
       
        category: ['简介', '喂养记录', '族谱'],
        activeIndex: 0,
        time: 0,
        sellPrice: null,
        breedPrice: null,
        activeOperate: null,
        id: '',
        
        showPicker: false,
        myMonkeyList: [],
        showScrollBox: false,
        showNoMoney: false,
        feedInfo: null,
        chargeAddress: null,
        safePwd: '',
        
        feedCoin: 1,
        feedCoinList: [],
        PeachNum: 10,
        records: [],
        current: 1,
        showFilter: false,
        params: {
          startGen: '',
          endGen: '',
          startMakeMoney: '',
          endMakeMoney: '',
          startWeight: '',
          endWeight: '',
        },
      }
    },

    mounted() {
      console.log('mounted', this)
            var swiper = new Swiper('.swiper-container', {
                pagination: '.swiper-pagination',
                paginationClickable: true,
                loop: true,
                speed: 600,
                autoplay: true,
                onTouchEnd: function() {
                    swiper.startAutoplay()
                }
            });
      this.$nextTick(function() {
        this.id = this.$route.params.id;
        this.initData();
      });
    },
    methods: {
       formatPrice() {
      return '¥' + (this.goods.price / 100).toFixed(2) *100;
    },
     onClickCart() {

      this.$router.push('../cart');
    },
    doBuyNow(){
      if (1) {
          this.$router.push('../placeOrderEntity')
        } else {
          
        }
    },
    addCart(){
      if (this.goods.id) {
          this.$toast({
            message: "已添加至购物车",
            duration: 1500
          });
          this.cartInfo = String(parseInt(this.cartInfo) + 1);

          this.$http
          .post(`/cart/add`, {
          goodsId: this.goods.id,
           num:1
           })
          .then(res => {
            if (res.code == 200) {
               
               
            } else {
              this.$router.replace('/404')
            }
          })
          .catch(function(error) {});
        }else{
          this.$toast({
            message: "加入购物车失败",
            duration: 1500
          });
        }
    },
      initData() {
        this.$http
          .get(`/goods/item/${this.id}`)
          .then(res => {
            if (res.code == 200) {
                this.goods.id = res.result.id;
                this.goods.title = res.result.name;
                this.goods.price = res.result.price;
                this.goods.express = res.result.freight;
                this.goods.remain = 999;
                this.goods.thumb = res.result.showingMap;
               
            } else {
              this.$router.replace('/404')
            }
          })
          .catch(function(error) {});
      },     
    }
  }
 
</script>

<style lang="scss" scoped>

  .goods {
  padding-bottom: 50px;
  &-swipe {
    img {
      width: 100%;
      height: 100%;
      display: block;
    }
  }
  &-title {
    font-size: 16px;
  }
  &-price {
    color: #f44;
  }
  &-express {
    color: #999;
    font-size: 12px;
    padding: 5px 15px;
  }
  &-cell-group {
    margin: 15px 0;
    .van-cell__value {
      color: #999;
    }
  }
}

  .page {
    position: relative;
    &:before {
      content: '';
      width: 1px;
      min-height: 101%;
      position: absolute;
    }
  }
  .head {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
 
</style>
